<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>我的家庭</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/common.css" type="text/css" media="all" />
<link href="css/zeroModal.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/tjlxr.min.css" rel="stylesheet">

<script src="js/bootstrap.min.js"></script>
<script src="js/content.min.js"></script>

<script src="js/zeroModal.js"></script>
<script>
$(document).ready(function(){$(".contact-box").each(function(){animationHover(this,"pulse")})});
</script>
<style>
.wrap h1 { border-bottom: #474645 2px solid; margin: 0 8px 20px 8px; height: 26px; overflow: hidden; line-height: 28px; font-size: 16px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; letter-spacing: 2px }
.wrap h1 p { background: #474645; width: 180px; color: #fff; text-align: center; box-shadow: #999 4px 5px 1px; }
.wrap h1 p span { color: #38b3d4; }
</style>
<script type="text/javascript">
var w,h,className;
function getSrceenWH(){
	w = $(window).width();
	h = $(window).height();
	$('#dialogBg').width(w).height(h);
}

window.onresize = function(){  
	getSrceenWH();
}  
$(window).resize();  

$(function(){
	getSrceenWH();
	
	//显示弹框
	$('.add a').click(function(){
        $('#editUserName').val('');
        $('#editRole').val('');
        $('#editPassword').val('');
        $('#editRePassword').val('');
        $("#wrong").hide();
        $("#right").hide();
        $('#edit_btn').attr('hidden',true);
        $('#add_btn').attr('hidden',false);

		className = $(this).attr('class');
		$('#dialogBg').fadeIn(300);
		$('#dialog').removeAttr('class').addClass('animated '+className+'').fadeIn();
	});
	
	//关闭弹窗
	$('.claseDialogBtn').click(function(){
		$('#dialogBg').fadeOut(300,function(){
			$('#dialog').addClass('bounceOutUp').fadeOut();
		});
	});
});
    function editUser(userId,userName,userRole,userPassword){
        $('#editUserId').val(userId);
        $('#editUserName').val(userName);
        $('#editRole').val(userRole);
        $('#editPassword').val(userPassword);
        $('#editRePassword').val(userPassword);
        $("#wrong").hide();
        $("#right").hide();
        $('#add_btn').attr('hidden',true);
        $('#edit_btn').attr('hidden',false);
        className = $(this).attr('class');
        $('#dialogBg').fadeIn(300);
        $('#dialog').removeAttr('class').addClass('animated '+className+'').fadeIn();
    }
    $('.claseDialogBtn').click(function(){
        $('#dialogBg').fadeOut(300,function(){
            $('#dialog').addClass('bounceOutUp').fadeOut();
        });
});
//删除弹框函数
function _confirm2(userId) {
        zeroModal.confirm({
            content: '确定移除该家庭成员？',
            contentDetail: '将移除该用户所有信息',
            okFn: function() {
                $.ajax({
                    type:"post",
                    url:"userController/deleteUser",
                    data:{userId:userId},            // 这里把表单里面的数据放在这里传到后台
                    dataType:"json",
                    success:function(flag){
                        if(flag=='0'){
                            zeroModal.success('该用户已删除!');
                            setTimeout(function () {
                                window.location.reload();
                            },1000)
                        }else if(flag=='1'){
                            zeroModal.error('删除失败，请检查该用户相册信息!');
                        }else if(flag=='2'){
                            zeroModal.error('删除失败，请检查该用户动态信息!');
                        }else{
                            zeroModal.error('删除失败，未知错误!');
                        }
                    },
                    error:function(){
                        zeroModal.error('用户删除失败!');
                    }
                });
            },
            cancelFn: function() {
                
            }
        });
    }
function addFun(e) {
    $("#userName1msg").html('');
    $("#rolemsg").html('');
    $("#password2msg").html('');
    var userName = $("input[name='userName1']").val();
    var role = $("input[name='role']").val();
    var password2 = $("input[name='password2']").val();
    var repassword2 = $("input[name='repassword2']").val();
    if(userName==''){
        $("#userName1msg").html('*');
    }
    if(role==''){
        $("#rolemsg").html('*');
    }
    if(password2==''){
        $("#password2msg").html('*');
    }
    if(userName!='' && role!='' && password2!=''){
        if(password2==repassword2){
            //  $("#wrong").hide('fast');
            $("#right").hide('fast');
            var close = false;
            $('#dialogBg').fadeOut(0,function(){
                close = true;
                $('#dialog').addClass('bounceOutUp').fadeOut();
            });
            //注册信息填写验证完成，开始注册
            if(close){
                setTimeout(function () {
                    $.ajax({
                        type:"post",
                        url:"userController/saveUser",      // 这里是提交到什么地方的url
                        data:{userName:userName,role:role,password2:password2},            // 这里把表单里面的数据放在这里传到后台
                        dataType:"json",
                        success:function(date){
                            if(date=="0"){
                                zeroModal.success('添加用户成功!');
                                setTimeout(function () {
                                    window.location.reload();
                                },1000)
                            }else if(date=="1"){
                                zeroModal.error('用户名已存在！');
                            }else{
                                zeroModal.error('失败，未知错误！');
                            }
                        },
                        /*  error:function(){
                         $("#msg").html("用户名或密码错误！");
                         }  */
                    });
                },800)
            }
        }else{
            $("#right").hide('fast');
            $("#wrong").show('slow');
        }
    }
}

function editFun(e) {
    $("#userName1msg").html('');
    $("#rolemsg").html('');
    $("#password2msg").html('');
    var userId = $("input[name='userId1']").val();
    var userName = $("input[name='userName1']").val();
    var role = $("input[name='role']").val();
    var password2 = $("input[name='password2']").val();
    var repassword2 = $("input[name='repassword2']").val();
    if(userName==''){
        $("#userName1msg").html('*');
    }
    if(role==''){
        $("#rolemsg").html('*');
    }
    if(password2==''){
        $("#password2msg").html('*');
    }
    if(userName!='' && role!='' && password2!=''){
        if(password2==repassword2){
            //  $("#wrong").hide('fast');
            $("#right").hide('fast');
            var close = false;
            $('#dialogBg').fadeOut(0,function(){
                close = true;
                $('#dialog').addClass('bounceOutUp').fadeOut();
            });
            //注册信息填写验证完成，开始注册
            if(close){
                setTimeout(function () {
                    $.ajax({
                        type:"post",
                        url:"userController/updateUser",      // 这里是提交到什么地方的url
                        data:{userId:userId,userName:userName,role:role,password2:password2},            // 这里把表单里面的数据放在这里传到后台
                        dataType:"json",
                        success:function(date){
                            if(date=="0"){
                                zeroModal.success('编辑成功!');
                                setTimeout(function () {
                                    window.location.reload();
                                },1000)
                            }else if(date=="1"){
                                zeroModal.error('用户名已存在！');
                            }else{
                                zeroModal.error('失败，未知错误！');
                            }
                        },
                        /*  error:function(){
                         $("#msg").html("用户名或密码错误！");
                         }  */
                    });
                },800)
            }
        }else{
            $("#right").hide('fast');
            $("#wrong").show('slow');
        }
    }
}

function checkPw1() {
    var password2 = $("input[name='password2']").val();
    var repassword2 = $("input[name='repassword2']").val();
    if(password2==repassword2) {
        $("#wrong").hide('fast');
        $("#right").show('slow');
    }else{
        $("#right").hide('fast');
    }
}
function quitFun(){
    $.ajax({
        type:"post",
        url:"userController/quit",      // 这里是提交到什么地方的url
        data:{},            // 这里把表单里面的数据放在这里传到后台
        dataType:"json",
        success:function(date){
            window.location.href="login.jsp"
        }
        /*  error:function(){
         $("#msg").html("用户名或密码错误！");
         }  */
    });
}
</script>
</head>
<body style="font-size: 16px;">
	<div id="head">
        <div class="wrap">
            <span id="user" style="color:#99CC00;">${user.userName}，欢迎来到[${user.familyName}]！</span>
            <button id="quit" onclick="quitFun()">退出</button>
            <div class="logo"><a href="index.jsp"><img src="images/logo.png" alt="" /></a></div>
            <div class="nav">
                <ul>
                    <li><a href="pageController/index">家庭主页</a></li>
                    <li><a href="pageController/myFamily"><span style="color:blue;">我的家庭</span></a></li>
                    <li><a href="pageController/dynamics?familyId=${user.familyId}">家庭动态</a></li>
                    <li><a href="pageController/photo?userId=${user.id}">家庭相册</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
	</div>
	<!--head结束-->

    <div id="header">
        <div class="wrap">
            <div class="banner">
                <ul class="texts">
                    <p style="font-size:21px; font-family: 华文行楷">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家，永远在我的记忆里，在我的意识里，在醒来梦去的眸子里，清晰如昨。 </p>
                    <p style="font-size:21px; font-family: 华文行楷">&nbsp;&nbsp;&nbsp;&nbsp;家是温馨的港湾，容纳漂泊的灵魂；家是如伞的大树，遮挡酷夏的骄阳；</p>
                    <p style="font-size:21px; font-family: 华文行楷">家是清凉的雨丝，拂去疲惫的征尘；家是永远的牵挂，珍藏幸福的存根。</p>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
    </div>
        <!--header结束-->
		<div id="main">
			<div class="wrap">
                <c:set var='roleadd' value='${user.role}'></c:set>
                <h1><p class="add"><span style="font-size:22px; font-family: 华文行楷">家庭成员</span><a href="javascript:;" class="flipInX"><button type="button" <c:if test="${!roleadd.equals('admin')}">hidden</c:if> style="float:right;">添加</button></a></p></h1>
             <div id="dialogBg"></div>
		<div id="dialog" class="animated" style="width: 380px;height: 280px">
			<img class="dialogIco" width="50" height="50" src="images/ico.png" alt="" />
			<div class="dialogTop">
				<a href="javascript:;" class="claseDialogBtn">关闭</a>
			</div>
            <br>
			<form action="" method="post" id="addForm">
                <table class="addInfos" cellspacing="20" style="margin-left: 50px;">
					<tr>
                        <td align="right"><label>用户名：</label></td>
                        <td>
                            <input id="editUserId" type="text" name="userId1" hidden value="" class="ipt" />
                            <input id="editUserName" type="text" name="userName1" required value="" class="ipt" />
                        </td>
                        <td><label id="userName1msg" style="font-size:25px;color: red; font-family: 华文行楷"></label></td>
                    </tr>
                    <tr>
                        <td align="right"><label>角色：</label></td>
                        <td><input id="editRole" type="text" name="role" required value="" class="ipt" /></td>
                        <td><label id="rolemsg" style="font-size:25px;color: red; font-family: 华文行楷"></label></td>
                    </tr>
                    <tr>
                        <td align="right"><label>密码：</label></td>
                        <td><input id="editPassword" type="password" name="password2" required value="" class="ipt" /></td>
                        <td><label id="password2msg" style="font-size:25px;color: red; font-family: 华文行楷"></label></td>
                    </tr>
                    <tr>
                        <td align="right"><label>确认密码：</label></td>
                        <td><input id="editRePassword" type="password" name="repassword2" oninput="checkPw1()" required value="" class="ipt" /></td>
                        <td >
                        <img id="right" style="width: 30px" src="images/right.png" hidden>
                        <img id="wrong" style="width: 30px" src="images/wrong.png" hidden>
                        </td>
                    </tr>
					<tr>
                        <td colspan="3" align="center">
                        <input type="button" value="添加" id="add_btn" class="submitBtn" onclick="addFun()"/>
                        <input type="button" value="编辑" id="edit_btn" class="submitBtn" onclick="editFun()"/>
                        </td>
                    </tr>
                </table>
			</form>
        </div>
              <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">

            <c:forEach items="${users1}" var="user1">
            <div class="col-sm-4">
                <div class="contact-box">
                        <div class="col-sm-4">
                            <div class="text-center">
                                <img alt="image" class="img-circle m-t-xs img-responsive" src="images/a2.jpg">
                                <div class="m-t-xs font-bold">${user1.role}</div>
                            </div>
                        </div>
                        <div class="col-sm-8">
                            <ul><strong>家庭&nbsp;:&nbsp;${user1.familyName}</strong></ul>
                            <ul><h3><strong>用户名&nbsp;:&nbsp;${user1.userName}</strong></h3></ul>
                            <ul><strong>密码&nbsp;:&nbsp;</strong>******<br></ul>

                            <c:set var='userN' value='${user.userName}'></c:set>
                            <c:set var='roleN' value='${user.role}'></c:set>
                            <c:set var='role1N' value='${user1.role}'></c:set>
                            <c:set var='user1N' value='${user1.userName}'></c:set>
                            <button id="bt${user1.id}" type="button" <c:if test="${!roleN.equals('admin') && userN!=user1N}">hidden</c:if>
                            onclick="editUser('${user1.id}','${user1.userName}','${user1.role}','${user1.password}')">编辑</button>
                            <button type="button" <c:if test="${role1N.equals('admin') || !roleN.equals('admin')}">hidden</c:if>
                            onclick="_confirm2('${user1.id}')">删除</button>
                        </div>
                        <div class="clearfix"></div>
                </div>
            </div>
            </c:forEach>

        </div>
    </div>
            </div>
		</div>
		<!--main结束-->
	<div class="foot">
        <div class="wrap">
            <div id="fbr">
                <p style="font-size:15px; font-family: 华文行楷">Copyright &copy; 家庭博客（2017）.</p>
                <div class="ft-nav">
                    <ul>
                        <li class="active"><a href="pageController/index">家庭主页</a></li>
                        <li><a href="pageController/myFamily">我的家庭</a></li>
                        <li><a href="pageController/dynamics?familyId=${user.familyId}">家庭动态</a></li>
                        <li><a href="pageController/photo?userId=${user.id}">家庭相册</a></li>
                    </ul>
                </div>
                <div class="clear"></div>
            </div>
        </div>
	</div>
</body>
</html>